<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet/less" href="css/index.less">
    <script src="js/less.min.js"></script>
</head>
<body>
    <div class="box">
        <ul id="shi"></ul>
        <ul id="fen"></ul>
        <ul id="miao"></ul>
    </div>
</body>
</html>
<script type="module">
    import * as allof from './js/index.js';
    let dcshi = document.getElementById('shi');
    let dcfen = document.getElementById('fen');
    let dcmiao = document.getElementById('miao');
    dcshi.appendChild(allof.adshi());
    dcfen.appendChild(allof.adfen());
    dcmiao.appendChild(allof.admiao());
    function dos(){
        let day = new Date();
        let dashi = day.getHours();
        let dafen = day.getMinutes();
        let damiao = day.getSeconds();
        let dony = 'translate(-50%,-50%) rotate('+(dashi*15)+'deg)'
        let dono = 'translate(-50%,-50%) rotate('+(dafen*6)+'deg)'
        let dong = 'translate(-50%,-50%) rotate('+(damiao*6)+'deg)'
        dcshi.style.transform = dony;
        dcfen.style.transform = dono;
        dcmiao.style.transform = dong;
    };
    setInterval(dos,100);
</script>